<template>
    <div class="container container-announcementCont">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="info-top">
                <div class="info-row word-title">成都中医药大学对我校科技成果转化重要贡献人进行奖励的公示</div>
                <div class="info-row word-title">【第{{detailInfo.number}}号】</div>
                <div class="info-row page-flex">
                    <span class="word-h5">发布时间：{{detailInfo.publicityTime}}</span>
                </div>
            </div>
            <div style="width:860px;margin:0 auto;padding:30px 50px">
                <div class="word-h2" style="text-align:center">成都中医药大学对我校科技成果转化</div>
                <div class="info-row word-h2" style="text-align:center">重要贡献人进行奖励的公示</div>
                <div class="info-row word-h4 word-grey word-letter">
                    根据《中华人民共和国促进科技成果转化法》(国发(2016]16号)、《教育部、国家知识产权局、科技部关于提升高等学校专利质量促进转化运用的若干意见》(教科技[2020】1号)及《成都中医药大学科技成果转化管理办法》(成中医校【2021】81号)相关规定现按要求将我校科技人员取得科技成果转化重要贡献人奖励相关信息予以公示，公示信息如下:
                </div>
                <div class="info-table">
                    <a-row>
                        <a-col class="word-h5" :span="24">成果转化信息</a-col>
                    </a-row>
                    <a-row>
                        <a-col class="word-h5 word-grey" :span="12">成果名称</a-col>
                        <a-col class="word-h5 word-grey" :span="5">成果类型</a-col>
                        <a-col class="word-h5 word-grey" :span="7">转化方式</a-col>
                    </a-row>
                    <a-row>
                        <a-col class="word-h5 word-grey" :span="12">{{detailInfo.achievementName}}</a-col>
                        <a-col class="word-h5 word-grey" :span="5">{{detailInfo.achievementCategory}}</a-col>
                        <a-col class="word-h5 word-grey" :span="7">
                            <span class="iconfont"
                                style="margin-right:5px">{{detailInfo.conversionWay==='转让'?'&#xe63d;':'&#xe63e;'}}
                                转让</span>
                            <span class="iconfont"
                                style="margin-right:5px">{{detailInfo.conversionWay==='许可'?'&#xe63d;':'&#xe63e;'}}
                                许可</span>
                            <span class="iconfont">{{detailInfo.conversionWay==='其他'?'&#xe63d;':'&#xe63e;'}} 其他</span>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col class="word-h5 word-grey" :span="6">转化收入</a-col>
                        <a-col class="word-h5 word-grey" :span="6">{{detailInfo.conversionIncome}} 万元</a-col>
                        <a-col class="word-h5 word-grey" :span="6">取得收入时间</a-col>
                        <a-col class="word-h5 word-grey"
                            :span="6">{{detailInfo.conversionIncomeTime| format('yyyy年MM月dd日')}}</a-col>
                    </a-row>
                    <a-row>
                        <a-col class="word-h5" :span="24">成果转化重要贡献人信息</a-col>
                    </a-row>
                    <a-row>
                        <a-col class="word-h5 word-grey" :span="4">姓名</a-col>
                        <a-col class="word-h5 word-grey" :span="3">性别</a-col>
                        <a-col class="word-h5 word-grey" :span="4">岗位职务</a-col>
                        <a-col class="word-h5 word-grey" :span="6">身份证号</a-col>
                        <a-col class="word-h5 word-grey" :span="3">贡献率</a-col>
                        <a-col class="word-h5 word-grey" :span="4">
                            <div>
                                <div>奖励金额</div>（万元）
                            </div>
                        </a-col>
                    </a-row>
                    <a-row v-for="item in detailInfo.awardList">
                        <a-col class="word-h5 word-grey" :span="4">{{item.name}}</a-col>
                        <a-col class="word-h5 word-grey" :span="3">{{item.gender}}</a-col>
                        <a-col class="word-h5 word-grey" :span="4">{{item.post}}</a-col>
                        <a-col class="word-h5 word-grey" :span="6">{{hideIdCard(item.identityCard)}}</a-col>
                        <a-col class="word-h5 word-grey" :span="3">{{item.rateOfContribution}}</a-col>
                        <a-col class="word-h5 word-grey" :span="4">{{item.awardMoney}}</a-col>
                    </a-row>
                    <a-row>
                        <a-col class="word-h5" :span="24">成果转化重要贡献奖励信惠</a-col>
                    </a-row>
                    <a-row>
                        <a-col class="word-h5 word-grey" :span="12">奖励总额(万元):</a-col>
                        <a-col class="word-h5 word-grey" :span="12">拟发放时间</a-col>
                    </a-row>
                    <a-row>
                        <a-col class="word-h5 word-grey" :span="12">{{detailInfo.achievementTransitionMoney}}</a-col>
                        <a-col class="word-h5 word-grey" :span="12">
                            {{detailInfo.ifPublicityPeriod?'公示期结束后':detailInfo.grantTime}}</a-col>
                    </a-row>
                </div>

                <div class="info-row word-h4 word-grey word-letter">
                    公示时间为{{detailInfo.achievementPublicityBeginTime | format('yyyy年MM月dd日')}}至{{detailInfo.achievementPublicityEndTime | format('yyyy年MM月dd日')}}，公示期{{getDayNum()}}天。公示期内如有异议，请通过信函、电话和网络举报等方式向学校中医药健康产业技术研究院反映。反映问题要实事求是、客观公正，并提供联系方式，以便调查核实。
                </div>
                <div class="info-row word-h4 word-grey word-letter">
                    电话:028-82784534(中医药健康产业技术研究院)
                </div>
                <div class="info-row word-h4 word-grey word-letter">
                    邮箱:cdzydcyy@yeah.net
                </div>

                <div class="info-row page-flex">
                    <div></div>
                    <div class="word-h3">
                        <div>成都中医药大学</div>
                        <div>{{detailInfo.publicityTime| format('yyyy年MM月dd日')}}</div>
                    </div>
                </div>
            </div>
            <div class="bottom-btnbox">
                <a-button class="bottom-btn" type="primary" @click="clickDownload">pdf下载</a-button>
                <a-button class="bottom-btn" type="primary" @click="clickHtmlDownload" style="margin-left:20px">下载原公示</a-button>
            </div>
        </a-spin>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { downLoadFile } from "@/utils";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: {} }) detailInfo!: any;
    splitContent(str: string) {
        return str.slice(0, 65) + "...";
    }
    hideIdCard(idCard) {
        return idCard.replace(/^(.{6})(.*)(.{4})$/, "$1****$3");
    }
    getDayNum() {
        const startTime = new Date(this.detailInfo.achievementPublicityBeginTime).getTime();
        const endTime = new Date(this.detailInfo.achievementPublicityEndTime).getTime();
        const day = (endTime - startTime) / (24 * 60 * 60 * 1000);
        return Math.ceil(day);
    }

    loading = false;
    async clickDownload() {
        this.loading = true;
        api.exportTemplate(
            {
                id: this.detailInfo.id,
                type: "GXR",
            },
            (res: any) => {
                const blob = new Blob([res.data], {
                    type: "application/pdf",
                });
                downLoadFile(
                    blob,
                    `成都中医药大学对我校科技成果转化重要贡献人进行奖励的公示【第${this.detailInfo.number}号】`
                );
                this.loading = false;
            }
        );
    }
    clickHtmlDownload() {
        const dom = document.getElementById("app");
        const totalHeight = dom?.scrollHeight || 0;
        (window as any)
            .html2canvas(dom, {
                height: totalHeight,
                windowHeight: totalHeight,
            })
            .then((canvas) => {
                // 将canvas转换为图片
                const imgData = canvas.toDataURL("image/png");

                // 创建图片元素
                const img = document.createElement("img");
                img.src = imgData;
                document.body.appendChild(img);

                // 或者保存图片
                const link = document.createElement("a");
                link.download = `成都中医药大学对我校科技成果转化重要贡献人进行奖励的公示【第${this.detailInfo.number}号】.png`;
                link.href = imgData;
                link.click();
                document.body.removeChild(img)
            });
    }
}
</script>

<style lang="scss">
.container-announcementCont {
    width: 1300px;
    background-color: #fff;
    border-radius: 8px;
    margin: 30px auto;

    padding: 50px 40px;
    color: #111;
    .word-title {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    }
    .page-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .word-grey {
        color: #777;
    }
    .word-h1 {
        font-size: 22px;
        font-weight: bold;
    }
    .word-h2 {
        font-size: 20px;
        font-weight: bold;
    }
    .word-h3 {
        font-size: 19px;
    }
    .word-h4 {
        font-size: 18px;
    }
    .word-h5 {
        font-size: 17px;
    }
    .info-row {
        margin-bottom: 20px;
    }
    .info-in-row {
        margin-bottom: 10px;
    }
    .word-panel {
        padding: 0 20px;
    }
    .word-letter {
        text-indent: 4ch;
        letter-spacing: 2px;
    }

    .info-table {
        text-align: center;
        border: solid 1px #999;
        line-height: 40px;
        letter-spacing: 1px;
        margin: 30px 0;
        .ant-row {
            border-bottom: solid 1px #999;
            display: flex;
        }
        .ant-row:last-child {
            border-bottom: unset;
        }
        .ant-col {
            border-right: solid 1px #999;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ant-col:last-child {
            border-right: unset;
        }
    }
    .bottom-btnbox {
        text-align: center;
    }
    .bottom-btn {
        height: 50px;
        width: 200px;
        font-size: 16px;
    }
}
</style>
